<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 阿巴阿巴 要用Hogan.js渲染 可以用util_1.js的renderHTML方法哟🤤-->
  <title>奶龙商店</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!--<script>
    // 定时请求在线人数
    function updateOnlineCount() {
      $.ajax({
        url: '/getOnlineUserCount',  // Servlet URL
        type: 'GET',
        dataType: 'json',
        success: function (response) {
          $('#onlineCount').text(response.onlineUserCount);
        },
        error: function () {
          console.error('获取在线人数失败');
        }
      });
    }

    $(document).ready(function () {
      // 每隔5秒更新一次在线人数
      setInterval(updateOnlineCount, 5000);
    });
  </script>-->

  <script type="text/template" id="header-template">
    <li class="nav-category">
      <a href="#" class="link-category">
        <span class="text">全部商品分类</span>
      </a>
      <div class="site-category" style="display: block">
        <ul class="site-category-list clearfix site-category-list-custom">
          {{#productList}}
          <li class="category-item">
            <a href="#{{description}}" class="title itemTitle">
              <span>{{description}}</span>
              <em class="iconfont-arrow-right-big"></em>
            </a>
          </li>
          {{/productList}}
        </ul>
      </div>
    </li>
  
    {{#categoryList}}
    <li class="nav-item">
      <a href="#" class="link" data-settrack="true">
        <span class="text">{{name}}</span>
      </a>
      <div class="item-children">
        <div class="container">
          <ul class="children-list clearfix">
            <!-- 可扩展子分类 -->
          </ul>
        </div>
      </div>
    </li>
    {{/categoryList}}
  </script>
</head>

<body>
  <!-- 悬浮窗 -->
  <div id="product-hover-info">
    <h4 id="hover-product-name"></h4>
    <p id="hover-product-description"></p>
    <p><strong>价格：</strong><span id="hover-product-price"></span>元</p>
  </div>
  <div class="header">
    <!-- topBar -->
    <div class="site-topBar">
      <div>
        <label>
          当前在线人数: <span id="onlineCount">1</span>
        </label>
        <div class="topBar-cart">
          <a class="link">
            <i class="fa-solid fa-cart-shopping"></i>
            购物车
          </a>
          <!-- 这里由 JS 动态控制数量 -->
          <span id="topBarItemCount" class="cart-mini-num J_cartNum">（0）</span>
          <span class="cart-mini-num J_cartNum"><button id="myorder">我的订单</button></span>

          <!-- 购物车内容区域 -->
          <div id="cartContainer" style="display: none;">
            <div id="J_miniCartMenu" class="cart-menu">
              <div class="menu-content">
                <!-- 商品列表 -->
                <ul id="J_miniCartList" class="cart-list"></ul>

                <!-- 空购物车提示 -->
                <div id="emptyCart" class="msg msg-empty" style="display: none;">
                  购物车中还没有商品，赶紧选购吧！
                </div>

                <!-- 总计 -->
                <div id="J_miniCartListTotal" class="cart-total clearfix">
                  <span class="total">
                    共 <em id="CartListTotalCount">0</em> 件商品
                    <span class="price">
                      <em id="CartListTotalPrice">0</em> 元
                    </span>
                  </span>
                  <a href="./Order.html" class="btn btn-primary btn-cart" >结算</a>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div class="topBar-info">
          <!-- 登录后显示 -->
          <div id="loggedInSection" style="display: none;">
            <a href="javascript:void(0)" class="link" id="welcomeUser" onclick="openModal()">欢迎回来！</a>
            <a href="/mainForm?action=logout" class="link" style="margin-left: 20px;">退出登录</a>

            <!-- 编辑个人信息模态框 -->
            <div id="modal" class="modal register-container">
              <div style="opacity: 1">
                <h2>编辑个人信息</h2>
                <form id="userEditForm" method="post" action="/mainForm">
                  <span>
                    <label>用户名：
                      <input type="text" placeholder="用户名" name="username" id="username" required>
                    </label>
                  </span><br>
                  <div id="feedback"></div>
                  <span>
                    <label>邮箱：
                      <input type="email" placeholder="邮箱" name="email" id="email" required>
                    </label>
                  </span><br>
                  <span>
                    <label>年龄：
                      <input type="number" placeholder="年龄" name="age" id="age" min="1" required>
                    </label>
                  </span><br>
                  <span>
                    <label>旧密码：
                      <input type="password" placeholder="旧密码" name="OldPassword" required>
                    </label>
                  </span><br>
                  <span>
                    <label>新密码：
                      <input type="password" placeholder="新密码" name="NewPassword" required>
                    </label>
                  </span><br>
                  <input type="submit" value="更改个人信息">
                </form>
              </div>
            </div>
          </div>

          <!-- 未登录显示 -->
          <div id="notLoggedInSection">
            <a href="./login.html" class="link">登录</a>
            <span class="sep">|</span>
            <a href="./register.html" data-register="true" class="link">注册</a>
            <span class="sep">|</span>
            <span class="message">
              <a href="#" class="J_needAgreement">消息通知</a>
            </span>
          </div>
        </div>

      </div>
    </div>
    <!-- 中间部分 -->
    <div class="site-header" style="opacity: 0.8; background-color: white">
      <div class="container">
        <!-- Logo -->
        <div class="header-logo">
          <a href="https://www.bilibili.com/bangumi/play/ep453031" title="奶龙动画" class="logo ir"
            style="background: url(/images/Logo.png) no-repeat; background-size: 56px; margin-top: 22px;">
          </a>
        </div>
        <!-- 分类导航 -->
        <div class="header-nav">
          <ul class="nav-list clearfix">
            <!-- 模板填充位置 -->
          </ul>
        </div>
        <!-- 搜索按钮 -->
        <div class="header-search">
          <form class="search-form clearfix">
            <label class="hide">站内搜索</label>
            <label for="search"></label>
            <input type="search" id="search" name="keyword" autocomplete="off" class="search-text" placeholder="奶龙"
              oninput="searchItem()">
            <a class="no-style-msq">
              <button class="search-btn" id="searchButton">
                <i class="fa-solid fa-magnifying-glass"></i>
              </button>
            </a>
            <div class="search-hot-words"></div>
            <div id="J_keywordList" class="keyword-list">
              <ul class="result-list">
              </ul>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div>
    <!-- 轮播图 -->
    <div style="background-color: rgba(255, 234, 175, 0.8)">
      <div class="home-hero-container container">
        <div class="home-hero box">
          <ul id="carousel">
            <li>
              <img src="../images/我.png" alt="轮播图1">
            </li>
            <li>
              <img src="../images/是.png" alt="轮播图2">
            </li>
            <li>
              <img src="../images/奶龙.png" alt="轮播图3">
            </li>
          </ul>
          <!-- 分页导航 -->
          <div class="carousel-indicators">
            <span data-index="0" class="active"></span>
            <span data-index="1"></span>
            <span data-index="2"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="page-main home-main">
      <div class="container">
        <!-- banner图 -->
        <div class="home-banner-box">
          <a href="https://www.163.com/dy/article/JDO2AG060518VHUU.html">
            <img src="../images/leijun.png" alt="借鉴对象的广告" width="1226" height="120">
          </a>
        </div>

        <!-- 商品展示 -->
        <div id="product-container"></div>
      </div>
    </div>
  </div>

  <!-- 鼠标跟随图标 -->
  <div class="mouse-follow-icon" id="mouse-follow-icon"
    style="display: inline-flex; align-items: center; justify-content: center;">
    <img src="../images/cursor.gif" alt="跟随鼠标的GIF" />
  </div>

</body>
<!-- JS 脚本 -->
<script th:inline="javascript">
  /*<![CDATA[*/
  var updateMsg = /*[[${session.UpdateMsg != null ? session.UpdateMsg : ''}]]*/ '';
  if (updateMsg) {
    alert(updateMsg);
    // 移除 UpdateMsg 的逻辑建议在 Controller 中完成
  }
  /*]]>*/
</script>
<script src="https://kit.fontawesome.com/c3413aee04.js" crossorigin="anonymous"></script>

</html>